<template>
<div>
  <head title="My account" bgwidth="150"></head>
  <div class="wrapper">
    <div class="userImg">
      <div class="imgBox">
        <image class="avator" :src="headimgurl" />
      </div>
      <text class="changeHead">Change Profile Picture</text>
      <input v-if="isWeb" class="fileInput" type="file" value id="file" @change="uploadConfig" />
      <div v-if="!isWeb" @click="changePhoto" class="fileInput"></div>
    </div>
    <div class="locationBox bb">
      <text class="meth_title">First name</text>
      <div class="meth_right">
        <input class="inputName" type="text" :value="user.first_name" @input="onChangeF" />
      </div>
    </div>
    <div class="locationBox bb">
      <text class="meth_title">Last name</text>
      <div class="meth_right">
        <input class="inputName" type="text" :value="user.last_name" @input="onChangeL" />
      </div>
    </div>
    <div class="locationBox bb">
      <text class="meth_title">Nick name</text>
      <div class="meth_right">
        <input class="inputName" type="text" :value="user.nickname" @input="onChange" />
      </div>
    </div>
    <text class="btn" @click="rightClick">Confirm</text>
    <text class="outbtn" @click="logout">Log off</text>
    <div :class="[showMask?'maskAlert':'hidemask']" @click="changeAlert('hide')"></div>

    <!-- 性别弹出框 -->
    <div class="shopAlert" ref="shopAlert" @click="e=>e.stopPropagation()">
      <!-- <text class="alertTop">Shipping method</text> -->
      <div class="alertScroll">
        <div class="selectLi" @click="user.sex=1">
          <text
            class="liIcon"
            :class="[user.sex=='1'?'selected':'']"
          >{{user.sex=="1"?"&#xe602;":"&#xe67f;"}}</text>
          <text class="liTxt" :class="[user.sex=='1'?'selected':'']">Man</text>
        </div>
        <div class="selectLi" @click="user.sex=2">
          <text
            class="liIcon"
            :class="[user.sex=='2'?'selected':'']"
          >{{user.sex=="2"?"&#xe602;":"&#xe67f;"}}</text>
          <text class="liTxt" :class="[user.sex=='2'?'selected':'']">Woman</text>
        </div>
      </div>
      <text class="sureBtn" @click="confirm">Confirm</text>
    </div>
    <div v-if="loading" class="maskIN" @click="event=> event.stopPropagation()">
      <floading class="indicator" color="#303030"></floading>
    </div>
  </div>
</div>
</template>

<script>
const navigator = weex.requireModule("navigator");
const photo = weex.requireModule("photo");
import asCore from "../../../mixin/core";
import { upload, edit_users_info } from "../../../mixin/ajax.js";

export default {
  components: {},
  data() {
    return {
      headimgurl: "root:img/officeIcon.png",
      loading: false,
      refreshing: false,
      showMask: false,
      user: {
        sex: "0",
        nickname: "",
        phone: "",
        headimgurl: "",
        last_name: "",
        first_name: "",
        users_uuid: ""
      }
    };
  },
  created() {
    asCore.getContext(context => {
      Object.assign(this.user, context);
      this.headimgurl = this.user.headimgurl
        ? this.user.headimgurl
        : "root:img/default.png";
    });
  },
  methods: {
    onChange(e) {
      this.user.nickname = e.value;
    },
    onChangeF(e) {
      this.user.first_name = e.value;
    },
    onChangeL(e) {
      this.user.last_name = e.value;
    },
    logout() {
      var pref = weex.requireModule("storage");
      pref.removeItem("users_id");
      const logOutBroad = new BroadcastChannel("logOut");
      logOutBroad.postMessage("33");

      setTimeout(() => {
        this.back();
      }, 500);
    },
    changeAlert(type) {
      var testEl = this.$refs.shopAlert;
      let transform = "100%";
      this.showMask = false;

      if (type == "show") {
        transform = "-100%";
        this.showMask = true;
      }
      const animation = weex.requireModule("animation");
      animation.transition(
        testEl,
        {
          styles: {
            transform: `translateY(${transform})`
          },
          duration: 400, //ms
          timingFunction: "ease",
          delay: 0 //ms
        },
        function() {}
      );
    },
    confirm() {
      this.changeAlert("hide");
    },
    uploadConfig(event) {
      let self = this;
      let file = event.target.files[0];
      // let param = new FormData(); // 创建form对象
      self.loading = true;
      upload({ type: 3, file: file }, res => {
        self.loading = false;
        if (res.code == 200) {
          self.uploadHead(res.data.file_url);
          // self.user.headimgurl=res.data.file_url
          Object.assign(self.user, { headimgurl: res.data.file_url });

          var reader = new FileReader();
          reader.readAsDataURL(file);
          reader.onload = function(e) {
            self.headimgurl = e.target.result;
          };
        }
      });
    },
    changePhoto() {
      var self = this;

      photo.open(800, 800, "#000000", "#ffffff", "#ffffff", function(e) {
        self.src = e.path;
        self.loading = true;
        upload(
          {
            type: 0,
            file: e.path
          },
          res => {
            self.loading = false;
            if (res.res.code == 200) {
              self.uploadHead(res.res.data.file_url);
              Object.assign(self.user, { headimgurl: res.res.data.file_url });
              self.headimgurl = e.path;
            }
          }
        );
      });
    },
    uploadHead(url) {
      edit_users_info(
        {
          users_id: this.user.users_uuid,
          headimgurl: url
        },
        (res, flag) => {
          if (flag) {
            const updateImg = new BroadcastChannel("updateImg");
            updateImg.postMessage("asd");
            if (res.message) {
              this.toast(res.message);
            }
          }
        }
      );
    },
    rightClick() {
      if (!this.user.nickname) {
        this.toast("Please enter your nickname");
        return false;
      }
      this.loading = true;
      edit_users_info(
        {
          users_id: this.user.users_uuid,
          nickname: this.user.nickname,
          first_name: this.user.first_name,
          last_name: this.user.last_name,

          sex: this.user.sex
        },
        (res, flag) => {
          this.loading = false;
          if (flag) {
            // this.toast(res.message);
            const updateImg = new BroadcastChannel("updateImg");
            updateImg.postMessage("update");
            this.back();
          }
        }
      );
    }
  }
};
</script>

<style scoped lang="less">
.rightBox {
  justify-content: flex-end;
  align-items: center;
  flex-direction: row;
  padding-left: 26px;
  padding-right: 26px;
  flex: 1;
  &:active {
    background-color: #000;
  }
}
.userImg {
  width: 350px;
  height: 300px;
  position: relative;
  justify-content: center;
  align-items: center;
}
.fileInput {
  position: absolute;
  left: 0;
  top: 0;
  width: 350px;
  height: 300px;
  opacity: 0;
}

.btn {
  width: 686px;
  height: 80px;
  line-height: 80px;
  border-radius: 8px;
  background-color: #303030;
  color: #fff;
  text-align: center;
  font-size: 30px;
  margin-top: 100px;
}
.btn:active {
  background-color: #000;
}
.outbtn {
  width: 686px;
  height: 80px;
  line-height: 80px;
  border-radius: 8px;
  background-color: #ffffff;
  border-width: 1px;
  border-color: #303030;
  border-style: solid;
  color: #303030;
  text-align: center;
  font-size: 30px;
  margin-top: 50px;
}
.outbtn:active {
  background-color: #000;
}
.complete {
  color: #ffffff;
  margin-right: 10px;
  font-size: 28px;
}

.imgBox {
  width: 159px;
  height: 159px;
  border-radius: 80px;
  margin-bottom: 30px;
  background-color: #ffffff;
  position: relative;
}
.imgMask {
  position: absolute;
  top: 123px;
  background-color: #eee;
  width: 159px;
  height: 159px;
  border-radius: 80px;
}
.avator {
  width: 159px;
  height: 159px;
  border-radius: 80px;
  margin-bottom: 30px;
  background-color: #ffffff;
}

.maskIN {
  position: fixed;
  left: 0;
  bottom: 0;
  top: 0;
  right: 0;
  justify-content: center;
  align-items: center;
  background-color: transparent;
}

.indicator {
  width: 40px;
  height: 40px;
}

.changeHead {
  font-size: 28px;
  color: #333333;
}

.wrapper {
  background-color: #f5f5f5;
  align-items: center;
}

.bb {
  border-bottom-style: solid;
  border-bottom-color: #ededed;
  border-bottom-width: 1px;
}

.locationBox {
  width: 750px;

  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  height: 104px;
  padding: 0 32px;
  /* margin-bottom: 20px; */
  background-color: #ffffff;
}

.meth_title {
  color: #323232;
  font-size: 30px;
  width: 230px;
}

.meth_right {
  flex: 1;
  flex-direction: row;
  justify-content: flex-end;
  align-items: center;
}

.cityName {
  margin-right: 30px;
  font-size: 28px;
  color: #999999;
  flex: 1;
}

.inputName {
  margin-right: 30px;
  font-size: 28px;
  color: #999999;
  flex: 1;
  /* background-color: #02993C; */
  height: 60px;
}

.rightIcon {
  font-family: iconfont;
  font-size: 26px;
  color: #999;
}

.hidemask {
  height: 0;
}

.maskAlert {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 400px;
  top: 0;
  /* background-color: rgba(0, 0, 0, 0); */
}

.shopAlert {
  position: fixed;
  left: 0;
  bottom: -400px;
  width: 750px;
  height: 400px;
  background-color: #ffffff;
  border-top-left-radius: 20px;
  border-top-right-radius: 20px;
  align-items: center;
  padding: 32px;
}

.alertTop {
  width: 686px;
  text-align: left;
  padding-bottom: 32px;
  font-size: 28px;
  color: #333333;
}

.alertScroll {
  flex: 1;
  flex-direction: row;
  width: 686px;
  align-items: center;
}

.selectLi {
  /* margin-bottom: 30px; */
  flex: 1;

  height: 70px;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  width: 750px;
  padding-left: 32px;
}

.liIcon {
  font-size: 40px;
  font-family: iconfont;
  color: #999999;
  margin-right: 10px;
}

.liTxt {
  color: #999999;
  font-size: 28px;
}

.selected {
  color: #ba8833;
}

.sureBtn {
  width: 686px;
  height: 80px;
  line-height: 80px;
  border-radius: 10px;
  margin-bottom: 14px;
  background-color: #303030;
  color: #fff;
  text-align: center;
  font-size: 30px;
}
.sureBtn:active {
  background-color: #000;
}
</style>
